Microsoft Welcome to the Windows 
Windows XP Visual Guidelines 


We are excited to share with you the 
new look and feel of Windows XP. 


Visual Guidelines 


We changed the look of Windows to 


Welcome make your computer more exciting 
+ What's New to use. Say goodbye to Windows 
About the Design grey and say hello to fresh colors, 
Fonts soft curves, rich gradients and 
Colors friendly typography and imagery. 
+lcons 
+ Controls The Windows XP look is based on 
; Folders & Layouts simplicity, color, freshness and 
FAQ excitement. We believe that visual 


design is integral to the user 
experience. We hope these 
guidelines help you generate 
excitement about Windows XP in 
your efforts. 


The Windows XP Design Team 


See our Frequently Asked Questions 
page. 


About these guidelines 

This is a graphics-intensive site, intended for viewing in 16- 
bit or 24-bit color. Thanks for your patience in waiting for 
the 24-bit graphics to appear, and for adjusting your 
monitor to get the full effect. 


This document is provided for informational purposes only 
and Microsoft makes no warranties, either express or 
implied, in this document. Information in the document, 
including URL and other I nternet Web site references, is 
subject to change without notice. Portions of this document 
specify software that is still in development. Some of the 
information in this documentation may be inaccurate or may 
not be an accurate representation of the functionality of 
final documentation or software. Microsft assumes no 
responsibility for damages that might occur directly or 
indirectly from the inaccuracies. 


Site last updated August 1, 2001 
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What's New in the Windows XP User 
Interface 


Welcome Screen 


The Welcome screen shows the name of every user who 
has an account on that computer. The screen appears when 
you start the computer and when you switch users. Users 
can pick images, also called tokens, to identify themselves. 
Note: if your computer belongs to a domain, as is common 
in many office networks, you won't see this new log-on 
screen. 


{©} Turn off computer 


Welcome screen 


Start Menu 


Click on the Windows XP start button and you'll discover a 
new Start menu that lets you easily access the most useful 
items on your computer. The left side of the menu lists the 
programs you use most frequently. This area includes 
space at the top to "pin" your favorite programs so they 
are always readily available. 


The top of the Start menu shows the name and token of the 
current user. The Log Off and Shut Down buttons at the 
bottom provide highly visible access to those features. 


Internet 

Internet Explorer 
(‘= 4 E-mail 

Outlook Express 


© Windows Media Player 
w MSN Explorer 


ro Windows Movie Maker 
3) Tour Windows XP 


La) Windows Catalog 


. Files and Settings Transfer 
Wizard 


All Programs > 


Start Menu 


Group view 


J) My Documents 


| i 4 My Recent Documents > 


& Printers and Faxes 


2) Help and Support 


» Search 


7 Run... 
[2| Log Off [o| Shut Down 


With Windows XP, you can view the contents of your 
folders by various categories based on file properties. To 
try this feature, click the View menu, select "Arrange I cons 
by", then select "Show in Groups". This feature lets you 
group files by name, size, file type, or other unique 
categories depending on the folder you're in. For example, 
you can view the files in the "My Music" grouped by artist, 
length, or year of release. Each group is separated by a 
group title and a blue line. 


= My Computer 


Ble Ect View Faverkes Tools Help 


Om OS \ewe Cram TH 


Hard Disk Drives 


System Tasks 


[2] View system information i) Local 066k (C:) 


GS 434 o remove programs 


Example of a Group view 


Filmstrip View 


Filmstrip view shows you thumbnail previews of pictures 
and lets you zoom in, zoom out, and change orientation of 
each image. To see this feature, open My Pictures or any 
folder that is primarily used for pictures. 


= My Pictures 


File Edt View Favortes Tools Help 


Gee - CE F Pseach Py roters Fi] 
i Picture Tasks 


TJ View as 9 slide show 
Sy Print this picture 
WR Set as desktop 


background 
File and Folder Tasks 4% 


fe) Rename this file 

GR Move this file 

[) Copy this file 
Publish this file to the 

a Web 


) E-mail this fie 


Example of a Filmstrip view 


Control Panel 


The Control Panel in Windows XP has been simplified to 
help you more easily find settings you're looking for. 
Control panels are grouped into categories. Picking a 
category displays a list of common tasks from the control 
panels in that category. You can click the control panels 
themselves to perform less common tasks. 


Pick a category 


, 
oa Appearance and Themes 
a 


m* Network and Internet Connections 


= 


yrs 
— 


6 Add or Remove Programs 


Sounds, Speech, and Audio Devices 


d "© Printers and Other Hardware 


. 


User Accounts 


Dote, Time, Language, and Regional 
Options 


Accessibility Options 


y Performance and Maintenance 


Control Panel 


Learn About 


Learn About topics are available in the User Accounts 
control panel in Windows XP Home Edition. These topics 
provide easily accessible help that's relevant to your 
current task. 


23 Learn About 


@8 User accounts 


Sharing 3 computer used to mean that other users coud 


Have your own ists of Web Favorites and 
recently visited Web sites, 


Protect your important computer settings. 


Have your own My Documents folder, and use 
a password to keep your files private. 

Log on faster, and quickly switch between 
users without closing your programs. 


Print this topic 
Learn more about User Accounts 


Example of a Learn About 


Color Schemes 


The new visual style of Windows XP comes in 3 different 
color schemes to give users you a variety of choices for 
enjoying their your user experience. You can change cColor 
schemes can be changed to match your mood, personality 
or activity. In addition to the Windows XP provides a 
default Blue color scheme there are and two alternative 


color schemes, Olive Green and Silver. 
How to change the Color Scheme 


1. Right-click on the Desktop and click "Properties" in 
the shortcut menu to open the "Display Properties" 
dialog. 


2. The "Display Properties" dialog appears. 

3. Click "Appearance". 

4. Under "Color Scheme", choose Default (blue), Olive 
Green, or Silver. 

5. Click OK. 


Blue color scheme characteristics 


The default Blue color scheme is fresh, vivid and engaging. 
This color scheme is the signature of the product and has 
the essence of the new Windows XP. 


Inactive Window Worx) 
Active Window SEE 


Message Box 


®&) 11:14.4m 


Olive Green color scheme characteristics 


The Olive Green color scheme is comforting, natural and 
fresh. This color scheme has the feeling of home and is 
designed to be more neutral and soft toned. 


Inactive Window ET x] 
ACTIVE Window. fox! 
1 


Silver color scheme characteristics 


The Silver color scheme is metallic and fresh. This color 
scheme is characterized by its precision sculpted look and 
neutral color scheme. 


kin} O 11:11 AM 
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About the Windows XP 
Design 


The new look of Windows XP is designed 
to create a friendly and visually simpler 
user experience. 


There are four key adjectives that 
describe the Windows XP look and feel: 
fresh, desirable, colorful, and simple. 


Fresh 


Rich color, soft curves and subtle 
gradients breathe life into Windows. High 
quality graphics and new icons add 
sophistication and personality. Windows 
has been completely revamped to make 
your computer experience more 
enjoyable. 


Desirable 


Texture and light give the interface a 
more tactile feel. The title bar and taskbar 
have a soft plastic feel and colorful 
buttons light up on mouseover to invite 
you to click on them. Subtle three- 
dimensional buttons and controls use 
color and light to provide better feedback. 
Once you use the Windows XP look and 
feel, you'll never want to go back to 
Windows Classic. 


Colorful 


A rich color palette of blues with accents 
of green, red and yellow define the 
default look of Windows XP. Subtle 
gradients and glows give depth and 
richness to backgrounds and toolbars. 
Color is used to improve discoverability 
and convey meaning of buttons such as 


the green Start button and red Close 
button. Say goodbye to Windows grey and 
say hello to smart, friendly colors. 


Simple 


The Windows XP look is designed to 
enhance ease of use. | mproved 
typography and layout provide hierarchy 
and clarity to help users find tasks. 
Colored buttons provide visual cues to 
communicate important system functions. 
Improvements in visual design and 
interface design combine to make a 
simpler Windows. 
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Fonts 


To improve visual interest and hierarchy, Windows XP 
uses some new typefaces and a variety of type sizes. To 
better support our Microsoft brand, we've introduced 
Franklin Gothic into the Windows XP user interface. 


Franklin Gothic is used 
only for text over 14 
Franklin Gothic Medium point. Franklin Gothic is 
Franklin Gothic Medium Italic often used for headers, 
and should never be 
used for body text. 


Tahoma is used as the 
system's default font. 
Tahoma should be used 
at 8, 9 or 11 point sizes. 


Tahoma 


Verdana is used only for 
title bars of tear- 

off/ floating palettes- 
Verdana Bold, 8 point. 


Verdana 


Trebuchet MS is used 
only for the title bars of 
windows- Trebuchet MS 
Bold, 10 point. 


Trebuchet MS 


Franklin Gothic 


Tools Help 


ys 


Folders 


Search 


7 


me 


>> 


r 
_— 


Example of Franklin Gothic Medium 21 point 
used as a title in the Control Panel. 


Tahoma 


Learn About 


Customize the way Windows and the desktop look 
for each user on your computer. 


Have your own lists of Web Favorites and recently 
visited Web sites, 


Protect your important computer settings. 


Have your own My Documents folder, and use a 
password to keep your files private, 


Log on faster, and quickly switch between users 
without closing your programs. 


Print this topic 
Learn more about User Accounts 


Example of Tahoma 9 point used as body copy in a Learn About help 
topic. 


Verdana 


File Edit Yiew Favorites Tools 


Set as desktop 
background 


Example of Verdana Bold 8 point 
as the title in a task box in the 
My Pictures folder. 


Trebuchet MS 


fl: My Pictures 


Favorites Tool 


\e Picture Tasks &) 


TJ view as a slide show 
ayy Print this picture 


Example of Trebuchet MS Bold 10 
point in the My Pictures title bar. 
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Windows 


Color is integral to achieving the fresh, friendly and simple 
experience of Windows XP. The Windows XP look is 
characterized by an energetic blue complimented with red, 
amber and green. Gradients, glows and textures give life and 
dimension to Windows XP colors. Color helps guide users 


through their experience. For example, the red close button 


Welcome : : me : 
eee n . 
. What's New helps improve discoverability of how to close a window 
About the Design 
Below is a sample of the colors used in Windows XP. Because 
Fonts , . 
Col the Windows XP look uses many color gradients, we 
wolors recommend you refer to the actual user interface to see the 
+Icons. range of color values used. 
+ Controls 
+ Folders & Layouts B I 
FAQ ase coiors 


R: 255, G: 204, B: 
0 
Hex: #FFCCOO 


R: 140, G: 170, B: 
230 
Hex: #8CAAE6 


R: 255, G: 153, B: 
51 
Hex: #FF9933 


R: 100, G: 135, B: 
220 
Hex: #6487DC 


R: 227, G: 92, B: 
47 
Hex: #DE5C2F 


R: 0, G: 51, B: 153 
Hex: #003399 


R: 19, G: 146, B: 
13 
Hex: #13920D 


R: 230, G: 234, B: 
216 
Hex: #E6EAD8 


Control colors 


R: 242, G: 201, B: 
119 
Hex: #F2C977 


R: 127, G: 157, B: 
185 
Hex: #7F9DB9 


R: 230 G: 139, B: 
44 
Hex: #E68B2C 


R: 33, G: 120, B: 
224 
Hex: #2178E0 


R: 128, G: 128, B: 
128 
Hex: #808080 


R: 18, G: 139, B: 
231 
Hex: #128BE7 


R: 161, G: 161, B: 
146 
Hex: #A1A192 


R: 77, G: 159, B: 
225 
Hex: #4D9FE1 


R: 184, G: 180, B: 
163 
Hex: #B8B4A3 


R: 131, G: 166, B: 
244 
Hex: #83A6F4 


R: 199, G: 197, B: 
178 

Hex: #C7C5B2 

R: 201, G: 199, B: 
186 

Hex: #C9C7BA 
R: 235, G: 235, B: 
238 

Hex: #EBEBEE 


R: 0, G: 60, B: 165 
Hex: #003CA5 


R: 8, G: 46, B: 162 
Hex: #082EA2 


R: 0, G: 70, B: 213 
Hex: #0046D5 


R: 49, G: 106, B: 


197 
Hex: #316AC5 


R: 8, G: 27, B: 203 
Hex: #081BCB 


R: 73, G: 119, B: 
180 
Hex: #4977B4 


R: O, G: 98, B: 234 
Hex: #0062EA 


R: 20, G: 165, B: 
244 

Hex: #14A5F4 

R: 142, G: 182, B: 


217 
Hex: #8EB6D9 


R: 155, G: 102, B: 
Hex: #9B6600 
R: 204, G: 155, B: 
Hex: #CC9BOO 
R: 255, G: 204, B: 
Hex: #FFCCOO 
R: 255, G: 255, B: 


Hex: #FFFFOO 


R: 183, G: 211, B: 
252 
Hex: #B7D3FC 


R: 210, G: 236, B: 
255 
Hex: #D2ECFF 


R: 38, G: 124, B: 8 
Hex: #267C08 


R: 130, G: 130, B: 
130 
Hex: #828282 


R: 34, G: 192, B: 
32 
Hex: #22C020 


R: 155, G: 234, B: 
156 
Hex: #9BEA9C 


R: 93, G: 179, B: 
255 
Hex: #5DB3FF 


R: 0, G: 141, B: O 
Hex: #008D00 


R: 49, G: 164, B: 
49 
Hex: #31A431 


R: 94, G: 219, B: 
94 
Hex: #5EDB5E 


R: 0, G: 102, B: 
204 
Hex: #0066CC 


R: 0, G: 155, B: 
255 
Hex: #O009BFF 


 R: 155, G: 204, B: 


255 


| Hex: #9BCCFF 


R: 204, G: 255, B: 
255 
Hex: #CCFFFF 


R: 255, G: 255, B: 
155 
| Hex: #FFFF9B 


R: 0, G: 102, B: O 
Hex: #006600 


| 


R: 255, G: 157, B: 
51 
Hex: #31A431 


R: 255, G: 204, B: 
102 
Hex: #FFCC66 


R: 102, G: 204, B: 
51 
Hex: #66CC33 


R: 255, G: 51, B: O 
Hex: #FF3300 


R: 152, G: 0, B: O 
Hex: #980000 


R: 155, G: 255, B: 
102 
Hex: #9BFF66 


R: 102, G: 0, B: O 


Hex: #660000 R: 204, G: 255, B: 
204 
R: 0, G: 51, B: 152 Hex: #CCFFCC 


Hex: #003398 
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R: 255, G: 153, B: 
51 
Hex: #FF9933 


R: 62, G: 53, B: 
171 
Hex: #3E35AB 


R: 200, G: 222, B: 
255 
Hex: #660000 


R: 90, G: 126, B: 
220 
Hex: #5A7EDC 


R: 0, G: 51, B: 153 


Hex: #003399 


Folder colors 


R: 100, G: 135, B: 
220 
Hex: #6487DC 


R: 1, G: 72, B: 178 
Hex: #0148B2 


R: 40, G: 91, B: 
197 
Hex: #285BC5 


R: 140, G: 170, B: 
230 
Hex: #8CAAE6 


R: 85, G: 130, B: 
210 
Hex: #5582D2 


R: 214, G: 223, B: 
245 
Hex: #D6DFF5 
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Icons 


This section walks you through the process of 
designing and creating Windows XP-style icons. 


The Windows XP icon style is all about fun, color and 
energy. Windows XP icons include a 32-bit version 
that provides smooth edges -no more jaggies! Each 
icon is rendered in a vector program and then 
massaged in Photoshop to create a beautiful image. 


This section is intended primarily for graphic 
designers. We strongly recommend you work with a 
designer to create your images, preferably one with 
experience in using vector or 3D programs. 


Characteristics of Windows XP-style I cons 


1.Color is rich and complementary to the Windows XP look. 

2.Angle and perspective provides a dynamic energy to the 
images. 

3.Edges and corners of elements are soft and slightly rounded. 

4.Light source is coming from the upper left-hand corner with 
the addition of an ambient light to illuminate other parts of 
the icon. 

5.The use of gradients provide dimension and give the icon a 
richer appearance. 

6.A drop shadow provides contrast and dimension. 

. Outlines provide definition. 

8. Everyday objects have a more modern consumer look such 
as computers and devices. 


N 


Icon Sizes 
There are 4 sizes of Windows icons- 48x48, 32x32, 24x24 and 
16x16 pixels. 


We recommend that your icon contains these 3 sizes: 


@ 48x48 pixels 
@ 32x32 pixels 
@ 16x16 pixels 


Doe 


Icons on the right side of the Start menu are 24x24 pixels. You 
need not include this size in your icons. 


7, My Documents 
© 


3 My Computer 


ee Control Panel 


OV Haln and Stioncre 


If you are creating icons for a toolbar, the Windows standard 
sizes are 24x24 and 16x16 pixels. 


‘€) Back + © + PP Search Ke Folders (ia]> 


Q@ Bak ~ GC) BP LP Search (Folders []y 


Icon Color Depth Support 


Windows XP supports 32-bit icons which are 24-bit images 
with an 8-bit alpha channel. This allows icons to display with 
smooth edges that appear to blend into any background. 


Each Windows XP icon should contain these 3 color depths to 
support various monitor display settings: 


@ 24-bit with 8-bit alpha (32-bit) 
@ 8-bit (256 colors) with 1-bit transparency 
@ 4-bit (16 colors) with 1-bit transparency 


608 


Color Palette 


These are the main colors that are used in our icons: 


R: 153, G: 102, B: 
0 
Hex: #996600 


R: 102, G: 102, B: 
153 
Hex: #666699 


R: 204, G: 153, B: 
0 
Hex: #CC9900 


R: 51, G: 51, B: 
102 
Hex: #333366 


R: 255, G: 204, B: 
0 
Hex: #FFCCOO 


R: 0, G: 51, B: 153 
Hex: #003399 


R: 0, G: 102, B: 
204 
Hex: #0066CC 


R: 255, G: 255, B: 
0 
Hex: #FFFFOO 


R: 0, G: 131, B: 
215 
Hex: #0083D7 


R: 255, G: 255, B: 
153 
Hex: #FFFF99 


R: 62, G: 154, B: 
222 
Hex: #3E9ADE 


Angle and g 


R: 255, G: 219, B: 
157 
Hex: #FFDB9D 


R: 255, G: 204, B: 
102 
Hex: #FFCC66 


R: 255, G: 153, B: 
51 
Hex: #FF9933 


R: 255, G: 121, B: 
75 
Hex: #FF794B 


R: 255, G: 51, B: 0 
Hex: #FF3300 


R: 153, G: 0, B: O 
Hex: #990000 


R: 255, G: 204, B: 
255 
Hex: #FFCCFF 


R: 204, G: 204, B: 
255 
Hex: #CCCCFF 


R: 153, G: 153, B: 
255 
Hex: #9999FF 


R: 102, G: 102, B: 
204 
Hex: #6666CC 


R: 153, G: 153, B: 


204 
Hex: #9999CC 


rouping of objects 


R: 0, G: 153, B: 
255 
Hex: #0099FF 


R: 153, G: 204, B: 
255 
Hex: #99CCFF 


R: 180, G: 226, B: 
255 
Hex: #B4E2FF 


R: 222, G: 255, B: 
255 
Hex: #DEFFFF 


R: 0, G: 102, B: O 
Hex: #006600 


R: 0, G: 153, B: 0 
Hex: #009900 


R: 102, G: 204, B: 
51 
Hex: #66CC33 


R: 153, G: 255, B: 
102 
Hex: #99FF66 


R: 204, G: 255, B: 
204 
Hex: #CCFFCC 


This is the perspective grid that Windows XP-style icons use: 


Not all objects work well displayed at an angle in the 16x16 
size. For example, the following objects are usually shown 


straight-on: 


1. Document icons. 
2. Icons that are symbols such as warning or information 
icons. 


3. 3. Icons that are not as recognizable at an angle or are 


single objects, such as the magnifying glass. 


If your icon includes overlapping secondary objects, you should 
place them at an angle as well, with the exceptions for straight- 


on icons described above. Consider also how your icons will be 
viewed as a set to help determine how to group objects. 


Drop Shadows 


Windows XP icons use a drop shadow to provide definition and 
added dimension. This effect is added in Photoshop and is 
described in more detail below. 


To add the drop shadow to your images, double-click on the 
image's layer in Photoshop and select Drop Shadow. Then 
change the angle to 135, Distance to 2 and Size to 2. The drop 
shadow is black at 75% opacity. 


Bs > Be 


Outlines 


When illustrating Windows XP-style icons, add an outline to the 
image to provide definition and ensure that the image works 
well on different background colors. 


Step 1: Conceptualize 


When designing new icons, we recommend sketching your 
ideas out with pen and paper. 


Here's an example of an initial sketch for the Windows XP My 
Pictures icon: 


Considerations when designing icons: 


1. Use established concepts where possible to ensure 
consistency of meanings for the user. 

2. Consider how the icon will appear in the context of your 
user interface and how it might work as part of a set of 
icons. 

3. Consider the cultural impact of your graphics. Avoid 
using letters, words, hands, or faces in icons. When you 
must represent people or users, depict them as 
generically as possible. 

4. When you combine multiple objects into one image in an 
icon, consider how the image will scale to smaller sizes. 
We suggest you use no more than 3 objects in an icon. 
For the 16x16 size, you can also consider removing 
objects or otherwise simplifying the image to improve 
recognition. 


Note: Only icons that Microsoft ships as part of Windows may 
use the Windows flag logo. Don't use the Windows flag in your 
icons. 


To support trademark and Windows branding guidelines, we 
are not using Windows flag icons with the exception of the 
Windows update icon. 


Common Icons 


¥) Properties 2) Refresh 2) Folders 
YG cut @) Home E> open 
“) Copy ©) search Save 
Paste sie Favorites > Print 
[MP Folder Options 4) History |) New 
Views 2 mail }) Print Preview 


Step 2: Illustrate 


To illustrate Windows XP-style icons, we recommend using a 
vector tool such as Freehand or Illustrator. Use the palette and 
style characteristics as outlined in the |con Design Overview. 


1. Illustrate your image using Freehand or I Illustrator. 

2. Create 3 sizes of the image. Because there will be a drop 
shadow added to the image later, you should create 3 
sizes that are around 46x46, 30x30 and 14x14 pixels. 

3. Copy and paste the vector images into Photoshop. 


Note: Photoshop is the recommended image creation tool 
because the tool we use to create the .ico files, Gif Movie Gear, 
offers a direct import of Photoshop files. Any image created in 
Photoshop that uses the "RGB" mode has an alpha channel 
attached. If there is transparency in the image or layer, that 
channel becomes meaningful for icon purposes. 


Step 3: Creating the 24-bit images 


After pasting your vector files into Photoshop, the next step is 
to finalize the 24-bit images. 


1. Once you've pasted your 3 sizes in Photoshop, check the 
readability and resolution of your images, especially at 
the 16x16 size. You may need to do some pixel-pushing. 
If the 16x16 is not reading clearly, consider going back 
to Freehand to simplify the image at that size. 

2. Add the drop shadow to your images by double-clicking 
on the image's layer and selecting Drop Shadow. Then 
change the angle to 135, Distance to 2 and Size to 2. The 
drop shadow is black at 75% opacity. 


Layer Style 


(fd Drop Shadow 


| Texture 


3. To merge the drop shadow and the 24-bit images 
together, create a new blank layer. In the Layers menu, 
select Merge Visible and merge the 3 layers together. 


New Layer... 
Duplicate Layer... 
Delete Layer 


New Layer Set... 
New Set From Linked... 
Lock All Layers In Set... 


Layer Properties... 
Blending Options... 


— — Merge Down 
: Merge Visible 
Flatten Image 


Palette Options... 


Create 3 new Photoshop files, one for each size: 48x48, 
32x32 and 16x16 pixels. Copy and paste the appropriate 
image. If an image's drop shadow gets cropped, you 
should go back to Freehand and scale down the image 
and follow the steps again. 


. Save each file as a .psd file. Do NOT merge the image 


layer with the Background layer. I t's helpful to include 
the size and color depth in the file name. 


Step 4: Creating the 8-bit and 4-bit images 


Now that you have the 24-bit images ready to be made into 32- 
bit icons, you need to create 8-bit versions. The 8-bit icons will 
be displayed in any color mode lower than 32-bit. 


The 8-bit versions will not have the 8-bit alpha channel. They 
will need to have their edges cleaned up because there's no 
anti-aliasing, so their edges will be jaggy. 


: I 


2s 


c 


In Photoshop, duplicate your 24-bit image layer and 
rename the layer to 8-bit images. 

Create a new blank layer and fill the layer with a dark 
color such as blue. 

Merge the 8-bit image layer with the new layer. 

Clean up the edges with solid colors, removing any anti- 
aliased pixels. Use consistent stair-stepping to make 
your jaggies less pronounced. 


. Check your image on a light background such as white to 


see how the image looks. 


Create 3 new Photoshop files for each size: 48x48, 32x32 
and 16x16 pixels. Copy and paste the appropriate image. 


. Next you need to index the images down to 256 colors. 


The 8-bit icons can have custom palettes. 


a.Take your 48x48 image and fill the background color 
with a unique background color that your image is 
not using. Windows XP icons often use magenta 
(R255 GO B255). 

b.Go to Image>Mode>!I ndexed Color and select Flatten 
Layers. 


8. 


c.In the Palette dropdown, select Custom. In the 
Custom dialog, click OK. Click OK in the Indexed 
Color dialog. 

d.Save the file as a .psd file. 

e.Save the other 2 size files using the same 
background color and applying the custom palette. 


Save each file as a .psd file. 


If you want your icons to look good on older versions of 
Windows, provide 16 color versions of your icon. 


1. 
2. 


3. 


Index your 8-bit images to the Windows 16 color palette. 
Clean up your images using only the colors from the 16 
color palette. 

Use a black outline on the bottom and right edges of the 
image. 

Use a dark gray or dark color outline for the left and top 
edges of the image. 


. Save the 3 sizes using the same background color. Be 


sure that the background color isn't used in the image 
because that's the color that will be the transparent 
color. 


Step 5: Creating the .ico files 


Once you have all of your images, it's time to compile them into 
an .ico file. To create 32-bit icons, we use a tool called Gif 
Movie Gear (GMG). To get this tool, go to 

www.gamani.con)/ foricons. 


These steps will walk you through the process of creating a 
typical .ico file which has 3 sizes and 3 color depths. 


i. 


You should have a total of 9 files- 3 sizes per color 
depth: 

48x48 at 24 bit 

32x32 at 24 bit 

16x16 at 24 bit 


48x48 at 8 bit 
32x32 at 8 bit 
16x16 at 8 bit 


48x48 at 4 bit 
32x32 at 4 bit 
16x16 at 4 bit 


. Open Gif Movie Gear (GMG) and simply drag each image 


file into the window (or use File>I nsert Frames). Each 
image will become a frame. 


. When you drag the 24-bit images (or any .psd file with 


layers) into GMG, you will be prompted with a dialog: 


Handling of PSD Layers 


This PSD file consists of more than one layer. These layers 
can be imported as separate frames or combined to import 
a single composite frame. How should the layers be 
imported? 


Layers 


© One composite frame 


© Blend each layer with Background Layer 

J Keep Background Laver as frame 
© Blend each layer with Composite Image 
@ No blending: each Layer is a frame 


Transparency 
IV Keep background transparency 
Lok] Cancet_| 


Check that the settings are: Layers as multiple frames, 
No blending, and Keep background transparency. 


4. The background layer of each 24-bit image will appear as 
a frame. Remove these blank frames by selecting the 
frame and hit the Delete key. 


5. Now you should have a total of 9 frames. The icons 
should be ordered in increasing color resolution: the first 
three are 4-bit (16 color), the next three are 8-bit (256 
color), and the last three are 24-bit color with an 8-bit 
alpha channel (32-bit total). 


a Ie | 


Note: To check your image's attributes, move your 
mouse over the images. You will notice a tooltip box 
containing resolution information about each image. The 
default setting shows dimensions, transparency, and bit 
count. You can add or remove the items shown by going 
to Edit>Preferences>Frame Tips. 


6. For the 8-bit and 4-bit versions, you need to make the 
background transparent. GMG uses lime green to 
represent the "transparent" color. You can set your own 
color (or stick with the default background color) by 
using the View>Transparency As menu item. The color 
chosen is only used for viewing and does not affect the 
images. 


7. To make the 8-bit and 4-bit versions transparent: 


a.Select a frame and click the dropper toolbar icon (the 
Pick Transparency Color icon). 


‘mycomp.ico - GIF Movie Gear (fel) 
File Edit Frame Animation view Help 


b.A dialog will open showing your icon. With the 
dropper, click the background color of the icon. This 
color will change to the lime green (or whatever 
color has been chosen as the transparent background 
color in GMG). 

c.Repeat for all 4-bit and 8-bit frames. 


8. To save the icon, select File>Save Icon As... 
Toolbar Creation 


The Windows toolbar icons follow the same style as other icons 
except that they do not use a drop shadow. Because toolbar 
icons are fairly small, we recommend keeping the images 
simple. You can make the images straight-on rather than 
angled if it helps clarify the meaning of the image. 


The Windows toolbar displays 2 sizes: 24x24 and 16x16 pixels. 
There are 2 states: default and hot (mouseover). For the hot 
state, we slightly increase the saturation of the images. 


The process for creating toolbar icons is very similar to other 
icons, except that the images are put into .bmp strips -- 
basically an ordered row of icons. 


1. Once you've illustrated the icons in Freehand at each 
size, copy and paste them into Photoshop. Put the 
24x24s on one layer and the 16x16s on another. 

2. 2. Draw a single row of boxes for each size on a separate 
layer, one row of 16x16 boxes and another row of 24x24 
boxes. 


Ce a os 


(ee 


3. Place each image in a square in the order you need them. 
Check that there's no overlap between images. 


"(Jf 4 
‘© > basa FE 
siael i | Ae 


OO ADA 


4. Save your Photoshop file. 
5. Next you will create the hot states in Photoshop. 
a.Take your 24x24 and 16x16 layers and duplicate 
each one. Rename the layers so they're clearly 
labeled as the hot versions. 


b.For each hot version, select the layer and go to 
I mage>Adjust>Levels...and move the middle arrow 
to 0.75. Click OK. 


Levels 


6. Once you've created the hot versions, you should have 1 
layer per strip: 1 default 24x24, 1 hot 24x24, 1 default 
16x16, and 1 hot 16x16. 

7. Next you need to create individual files for each strip. 

a.One way to do this is to use the Crop tool and crop 
the file down to a strip's dimensions and then save 
that file. Each strip must be measured from the 
beginning of the first box to the end of the last box. 

b.Save each strip as a separate 24-bit .psd file. 


il viewdef24_24bit.psd... [L |fEl(X) 


OOroe 


8. To save a strip as a 32-bit image, drag a strip into GMG. 
Remove any blank frames. Go to File>Export 
as>Filmstrip. On the Film Export dialog, check that 
BMP/ DIB and 24-bit with Alpha is selected. 


AVI Creation 


Windows XP uses 8-bit AVIs. The process for creating .avi files 
is the same as for icons: you prepare the pieces in Photoshop 
then drag them into GMG. Follow the instructions for creating 8- 
bit icon versions. 


To save your AVIs using GMG, go to File>Export As>AVI file... 
Considerations when creating .avi files: 


@ Use magenta (R255 GO B255) as the background 
transparency color. 

@In Photoshop, it's important that you don't have any 
stray pixels that could appear. Set your fill tolerances to 
O and make sure anti-aliasing is not checked. 
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Windows 


Controls in Windows XP are characterized by round 
corners, subtle dimensionality, and color to help 
distinguish states. The images in this section are shown in 


the default Blue color scheme and change color if the user 
isual Guidelines : 
selects the Silver or Olive Green schemes. 
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Windows Status © unchecked disabled 
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Menus ‘» checked disabled 
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FAQ Radio button states 


Check Boxes 


Check boxes have 3 sizes: 13x13, 16x16, and 25x25 pixels. 
Windows XP automatically uses the best size based on the 
video card DPI settings. 


The text for a check box should change depending on its 
state. The following RGB values should be used for the text 
of these states: 


Checked Disabled Text: R: 161 G: 161 B: 146 
Unchecked Disabled Text: R: 161 G: 161 B: 146 
Mixed Disabled Text: R: 161 G: 161 B: 146 


unchecked normal 


O 

[1 unchecked hot 

(1 unchecked pressed 
{unchecked disabled 
[¥] checked normal 
checked hot 

[MM] checked pressed 
checked disabled 
[=] ~— mixed normal 
mixed hot 

[=] _—s mixed pressed 

‘=| mixed disabled 


Check box states 


Command Buttons 


A command button should typically be 75 pixels wide (50 
dialog units) by 23 pixels tall (14 dialog units). The curve 
of a command button is a 1 pixel indent. 


The button text for a command button should change 
depending on its state. 


Disabled Text: R: 161 G: 161 B: 146 


UK . 
disabled 


default 


Command button states 


Text Boxes 


The colors for an edit box should change depending on its 
state. 


Normal Border Color: R: 127 G: 157 B: 185 


Fill Color: 
Disabled: R: 235 G: 235 B: 228 
Read Only: R: 235 G: 235 B: 228 


Text Color: 
Disabled: R: 161 G: 161 B: 146 
Read Only: R: 0 G: 0 B: O 


norma 
sable 
readonly 


Text box states 


Tabs 


Tabs have a rollover state as shown below. 


normal 


Display Properties 


| Desktop | Screen Saver | Appearance | Settings | 


hover 


Display Properties 


Desktop | Screen Saver| Appearance Setinge | 


Tabs 


Group Boxes 


Group boxes can be any size necessary to accommodate 
the intended grouping of controls. 


A group box title should change depending on its state. 


Text Color: 
Normal: R: 0 G: 70 B: 213 
Disabled: R: 161 G: 161 B: 146 


Screen saver 


Wait: minutes [¥] On resume, display Welcome screen 


Group Box 


DropDown Combo Boxes 


A dropdown combo box's text should change depending on 
its state. 


Text Field Fill Color: 
Normal: R: 255 G: 255 B: 255 
Disabled: R: 201 G: 199 B: 186 


Text Field Border Color: 
Normal: R: 127 G: 157 B: 185 
Disabled: R: 245 G: 244 B: 234 


| Text “i normal 


Text a) «= shot 
did 
¥|__ highlighted 
Text ~ disabled 


Dropdown Combo Box states 


Scroll Bars 


Scroll bars are composed of three different pieces: the 
scroll arrow buttons, the scroll box, and the scrollbar shaft 
which is the vertical background of the scroll bar. 


m new... [2 (E(x) 
ee” 


Volleyball 


scroll box scroll buttons 

nm) 2 a, 4) >| normal 
Aw & BB het 

om 2 B B@ B B pressed 


4| v | aS) disabled 


Scroll box and button states 


horizontal vertical 


normal 


disabled 


Scroll shaft states 


Slider 


The slider control can be displayed in a vertical or 
horizontal orientation. Sliders are available in two different 
styles: square and pointed. The square style is typically 
used for vertical sliders, and the pointed style is used 
horizontally. 


‘slider Pager 

Oa 
J y) > ‘normal 
J - = rollover 
7 Q ra | — 
cI je 
DS ves 
0 ; me disabled 
CI 


Slider control states 


Spin Buttons 


The text for an edit box should change depending on its 
state. 


Text Field Normal 


Outline Color: R: 130 G: 130 B: 130 
Fill Color: R: 255 G: 255 B: 255 


Text Field Disabled 
Outline Color: R: 161 G: 161 B: 146 
Fill Color: R: 235 G: 235 B: 228 


normal 


normal 


disabled 


Up/ down spin buttons 


Windows Status Bar 


The status bar is located at the bottom of a window and 
displays information about the current state of the 
document or other information in the window. 


The status bar is composed of 3 different pieces: the 
background area, separators to group information and 
grippers for resizing the window. 


background separator gripper 


Example of a status bar 


Separator Left Line: R: 199 G: 197 B: 178 
Separator Right Line: white 


Gripper Front Squares: R: 184 G: 180 B: 163 


Gripper Front Squares: white 
Window Title Bar and Frame 


The window title bar and frame are the outer most 
elements of a window. There are two sets of frames and 
title bars: standard windows and tool palettes. 


= New Folder ae) ta 


File Edit ‘Yiew Favorites Tools 


Standard window components in actual size 


™ Schedule (. (ol/x| inactive 
BBSTES] active 


[x] 
Edit View Favorites | Mm 


File 


im Project (Efe |x) maximized 


Title Bar Buttons 


normal 
hot 
pressed 
disabled 


(2) Joe jx) 


Example of the states for Title Bar buttons 
Toolbars 


The Windows XP toolbar displays 2 icon sizes: 24x24 and 
16x16 pixels. There are 2 icon states: default and hot. By 
default, the icons are in color and on mouse-over they 
appear slightly more saturated. 


™ New Folder 


View Favorites Tools Help ar 


© +t PP Search Key Folders (ia]> 
v) Go 


24x24 pixel 
icons 


= (Bix) 


File a View Favorites Tools Help ae 
elias Q@ Bak ~) Q~ BP LP Search (Folders [F~ 
Address v| Go 


f New Folder 


File Edit View Favorites Tools Help ay 
unlocked ; : 
: Back jy © Search Folders ’ 
toolbars E o v a a © 
: Address v| Go 


Example of toolbar 


Menus 


Here are the colors and states for menus: 


Undo Delete Ctrl+é highlight background color 
highlight text color 
Cut 
Copy 
Paste disabled text color 
Paste Shortcut 
border color 
Copy To Folder... 
Move To Folder... 
Select All enabled text color 
Invert Selection 


Highlight Background Color: R: 49, G: 106, B: 197 
Highlight Text Color: R: 255, G: 255, B: 255 
Border + Separator Color: R: 128, G: 128, B: 128 
Disabled Text Color: R: 128, G: 128, B: 128 
Background Color: R: 255, G: 255, B: 255 


Enabled Text Color: R: 0, G: 0, B: O 
Column Heading Controls 


The column heading control, also called a header control, 
has some new visual cues to help you sort your 
information. When you mouseover a column, an orange 
highlight appears on the column's header. Clicking on a 
column to sort displays a grey background under the list to 
give feedback on the sort selection. 


Name Size ~ Type normal 
%}budget 12KB Microsoft Excel Worksheet 
1] proposal 11 KB Microsoft Word Document 
NS logo OKB Bitmap Image 
“Nome Size Type pressed 
M4 | proposal 11 KB Microsoft Word Document 
[logo OKB Bitmap Image 
3 ]budget 12KB Microsoft Excel Worksheet 

Name Size Type hot 
8] proposal 11 KB Microsoft Word Document 
logo OKB Bitmap Image 
34 ]budget 12 KB Microsoft Excel Worksheet 

Name Size Type sort 
1) proposal 11KB Microsoft Word Document 

logo OKB Bitmap Image 

3 ]budget 12KB Microsoft Excel Worksheet 


Example of column header states 


Progress I ndicator 


The progress indicator is composed of the progress track 
and the progress indicator. The progress track is the 
outline of the progress indicator. The progress indicator is 
the green square that fills the progress track. 


Navigation Buttons 


Navigation buttons are used for actions that navigate the 
user to a new place in Windows XP. The signage style of 
these buttons emphasizes their navigational purpose. 


These buttons are used for a defined set of tasks or actions 
in Windows XP. They should not be used for command 
buttons. 


The color of the navigational buttons is designed to convey 
the level of severity of the action. Windows XP uses four 
colors: 


Blue: A neutral action. Example: the control to minimize 
a window. 


Green: The start of an action, or a simple navigation. 
Example: the Go button in the Address bar. 


Red: An action that has a high impact result. Examples: 
the Close button in the title bar; the Shut down 
button in the Start menu. 


Yellow: A less severe result than red, but still high 
impact. Example: the Log Off button in the Start 
menu. 


These navigation buttons are used at these sizes: 32x32, 
24x24, 21x21, 16x16, and 13x13 pixels. 


normal 


hover 


pressed 


disabled 


Navigational buttons are completed by adding a white sign 
to the colored background. The following signs are 
available in Windows XP: 


are - 
= 
a 


Start button and Taskbar 


The Start button and taskbar define the look of Windows: 
colorful, softly curved and engaging the user in a fresh yet 
familiar way. 


We've colored the Start button green to help improve 
discoverability of where users should to being their 
experience. Move your mouse over the Start button and it 
lights up to give you feedback. The plastic texture of the 
taskbar gives a nice tactile feel and the notification area on 
the right uses a lighter color value to indicate it has a 
unique usage. 


Start button and taskbar 


Start f= My Documents normal 


Start | fist My Documents hover 


Start fm My Documents pressed/selected 


start f= My Documents hover/selected 


© F Microsoft Outlook alert 


Taskbar button states 


start normal 


start hover 


start pressed 
Start button states 


Taskbar Elements 


These are some of the main elements of the taskbar: 


notification show/hide 
overflow chevron button 


untitle... 


gripper taskbar scroll 


When you open several windows in one application, 
Windows XP automatically groups them together in one 
taskbar button, making the taskbar less cluttered and 
easier to use. 


Locking the taskbar 


The taskbar is locked by default to prevent users from 
moving it accidentally. To unlock the taskbar, right-click on 
a blank area of the taskbar and select Lock the taskbar. A 
gripper bar at the top of the taskbar appears when the 
taskbar is unlocked. 


= My Documents 


fie My Documents 


Taskbar Orientations 


Bottom 


Right 


Left 
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Folders & Layouts 


Folders 


There are three types of designs for folders in Windows XP: 
special folders, soft barrier pages, and generic webviews 


Special Folders 


Special folders, such as My Music and My Pictures, are 
visually distinguished by the unique design of the special 
task box at the top of the left pane and a large watermark 
in the right side of the folder. All graphics are stored as 32- 
bit .BMP files. 


The large watermark in the bottom right of the folder is 
150x150 pixels. I t's designed to be anchored to the bottom 
of the page. Tint the image blue (R71G94B148) and screen 
back to about 12% opacity with an alpha channel. 


fi My Music SE 


File Edit ‘Yiew Favorites Tools Help 


GO sxx ’ © od 5 DO search \[> Folders (ial 


] 
; 
“a 


«) Music Tasks « 


> Play all 
Co Shop For music online 


File and Folder Tasks 


(9 Make a new Folder 
kg Share this Folder 


Other Places ¥ 


Example of the My Music special folder 


The special task box contains: 


1. One 32x32 pixel icon to the left of the header. 

2. A watermark in the bottom right of the special task 
box. Tint the image blue (R71 G94 B148) and screen 
back to about 12% opacity with an alpha channel. 

3. The header font is Tahoma Bold, 8 point, white 

4. Body font is Tahoma, 8 point, R33 G93 B198 


blue header gradient: 
R1 G72 B178 -> R40 G91 B197 


; 
®) Music Tasks 


> Play all 


@ Shop for music online special task box fill color: 


R239 G243 B255 


Example of a special task box 
Soft Barriers 


The soft barrier pages contain a large watermark of the 
folder's icon in the bottom right measuring 300x300 pixels. 
It's designed to be anchored to the bottom of the page. 


The title text in the soft barrier page is Franklin Gothic 
Medium 21 point, R214 G223 B245. 


The body text is Franklin Gothic Medium 14 point, white. 
To create the watermark in Adobe Photoshop: 


. Use a 300x300 image 

Set the opacity to 15% 

Tint the image applying this colorization: Hue 222, 
Saturation 0, Light 0 

4. Set the input levels to 40, 100, 255 


all ag 


TTP These files are hidden. 
Qs corterts 


MS Add or remove programs This folder contains files that keep your system working properly. 
oP Search fee fhes or folders You should not modify its contents. 


Show the contents of this folder 


Example of a watermark in a soft barrier page 


Generic webviews 


Any folder that isn't a special folder and doesn't have a soft 
barrier page is a generic webview. A generic webview has 
task boxes in the left panel. The header font is Tahoma 


Bold, 8 point, R33 G93 B198. 


File and Folder Tasks 


Make a new folder generic task box fill color: 
@ Publish this Folder to the R215 G222 B248 
Web 


fa? Share this Folder 


Other Places 


white header gradient: 
white -> R197 G210 B240 


Example of a generic webview task box. 


Letterbox Layouts 


A letterbox style layout is used for unique full-screen pages 
in the initial user experience. Two examples of this are the 
setup screen and the Welcome screen below. These layouts 
are characterized by dark blue horizontal strips framing a 
rich blue background. The background contains a soft glow 
and there are 2 horizontal accent gradients of white at the 
top and orange at the bottom. 


White horizontal accent gradient: (from left to right) 
RO G51 B153 to R140 G170 B230 to RO G51 B153 


Orange horizontal accent gradient: (from left to right) 
R62 G53 B71 to R53 G157 B53 to R171 G48 B171 


In addition you can use a 1 pixel vertical line to visually 
separate content. This line is (from left to right): 
R90 G126 B90 to R126 G222 B126 to R220 G255 B220 


Windows 


To begin, click your user name 


D) Turn off computer 


Example of the Welcome screen 


Windows 


Who will use this computer? 


Type the narne of each perton ath. 
Windows to cegantze and dsptay inform 


Your name 


ick User Accounts 


For help 
tock here o press FA 


Example of a screen in the set up experience 
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Frequently Asked Questions 


Icons 


Q: Can I just take a screenshot of an icon 
to use it? 

A: No, you can not. The Windows XP icons 
have a dropshadow and anti-alias to the 
background so taking a screenshot will 
reduce the quality of the image. 
Additionally you may only reuse icons 
that are redistributed for public use. We 
will be releasing some common icons in 
the near future such as cut, copy, paste. 


Q: I see an icon in Windows XP that I like, 
how can |! get it? 

A: Windows XP icons should be used 
consistently to represent the same task or 
object. Using an icon to represent 
multiple things in the user experience 
dilutes the meaning and recognition. For 
example, always use the same scissors 
icon to represent "cut" or only use the 
Control Panel icon to represent the 
Control Panel folder. We will be providing 
a set of common icons for usage ina 
future update to these guidelines. 


Q: Can! modify an existing icon to 
represent something else? 

A: The modification of an icon needs to be 
very significant to avoid any potential 
confusion with the existing icon. 


Q: Is there somewhere I can go to have 
the icons | need made to match the style 
of Windows XP? 

A: There are companies such as 
IconFactory (www.iconfactory.com) that 
are experts at making Windows XP style 
icons. A good illustrator or designer 


should be able to emulate the style 
following the guidelines and looking at 
Windows XP. 


Graphics 


Q: Is it possible to implement graphic 
elements that anti-alias on the fly by the 
OS or should we not anti-alias these 
elements? 

A: Yes, the operating system does support 
32-bit bitmaps. You can use tools such as 
GifMovieGear to create these images. 
When creating an anti-aliased element it 
is important to remember to test your 
graphic in 16-bit and 24-bit color 
configurations. 


Q: The page layout includes a header. Is it 
acceptable to have a web-like navigation 
bar inside the header? 

A: Yes. However we do not have an 
example of this in Windows XP to 
recommend how you could apply this. 


Themes 


Q: How dol create a theme? 

A: At this point in time we are not 
allowing additional themes to be created 
for Windows XP. This is primarily because 
we have found that additional themes can 
cause application compatibility issues. 
Allowing the creation of additional 
themes is something that we are 
investigating for future releases. 


Q: Can individual applications theme 
themselves separately from the OS? 

A: Yes it is possible for applications to 
theme themselves separately from the 
OS. Windows Media Player is an example 
application that does this however 
theming separately is not recommended. 
Most users will expect a consistent user 


experience, across multiple applications 
so doing a custom look on your 
application can detract from the user 
experience of your application. Diverging 
from the Windowsn XP look and feel will 
also mean that your application will 
manually need to adjust for the currently 
selected theme, as well as handle 
accessibility and system colors 
appropriately. 


Q: Can I get access to the bmps for the 
different Windows XP themes? 

A: No, you should never use any of the 
theme bitmaps directly, you should 
always render the theme images using 
the theme API's. This way if new themes 
are released in the future your application 
will work correctly. 


Q: How do! make my application/ design 
work with different color schemes such as 
Lilac or High Contrast? 

A: When rendering your application and 
there is no theme selected (Null theme 
handle) your application should use 
system metric colors to correctly render 
the various aspects of the application. 
This is the same technique as used on 
Windows 2000. 


Q: Do I need to create 3 different sets of 
graphics (blue, silver, olive green) for my 
application? 

A: If you have decided to theme your 
application separately from the OS then 
we recommend that you stay in sync with 
the currently selected theme and provide 
the user with a consistent experience. 
Because of the added complexity we do 
not recommend that applications theme 
themselves separately from the OS. 


General 


Q: Will Microsoft critique the work we 
have done on our project to be sure we 


are on the right track? 

A: We are very interested in the 
applications that you make and will often 
provide feedback on how these 
applications can work better with 
Windows XP however we can not 
guarantee that you will get a response. 
Unfortunately we just don't have the time 
to see all the great work people are doing 
with applying the Windows XP look to 
their products. 


The document "Using Windows XP Visual 
Styles" describes how to use Microsoft 
Windows XP to perform the more common 
tasks that are necessary to apply visual 
styles to your applications. 


If you have further questions, please 
email your inquiries to 
winxpdes@microsoft.com 
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